<template>
	<view>
		<view class="bg-white padding-sm">
			<uv-search v-model="queryForm.val" @search="searchcar" actionText="搜索">
				<template v-slot:prefix>
					<uv-icon name="arrow-down" :label="place" label-pos="left" @click="tolocal"></uv-icon>
				</template>
			</uv-search>
		</view>

		<uv-tabs v-if="showTab" :list="tablist" :current="tabvalue" @change="changeTabs" :scrollable="false"
			:customStyle="tbsCustomStyle"></uv-tabs>
		<view class="searchloglist" v-else>
			<uv-cell-group title="搜索历史">
				<uv-cell v-for="(item,index) in searchloglist" :key="item" icon="clock" size="normal">
					<template v-slot:title>
						<view @click="handllog(item)">
							{{item}}
						</view>

					</template>
					<template v-slot:right-icon>
						<uv-icon name="arrow-right" color="#999" @click="deletesearchlog(index)"></uv-icon>
					</template>
				</uv-cell>
			</uv-cell-group>

		</view>
		<view v-if="queryForm.type=='pyq'">
			<fy-pyq-item v-for="item in list" :key="item.id" :pyqInfo="item"></fy-pyq-item>
		</view>
		<view v-if="queryForm.type=='upload'">
			<fy-car-item v-for="item in list" :key="item.id" :carInfo="item"></fy-car-item>
		</view>
		<view v-if="queryForm.type=='need'">
			<fy-need-item v-for="item in list" :key="item.id" :needInfo="item"></fy-need-item>
		</view>
		<fy-group-item v-if="queryForm.type=='group'" v-for="item in list" :key="item.id" :info="item"></fy-group-item>
	</view>
</template>

<script>
	import { searchAllByVal } from '@/utils/http.js'
	import { mapState } from 'vuex'
	import baseconfig from '@/config.js'
	import { encryptphone, timespantoYMD } from '@/common/tools.js'
	import { setSearchLog, getSearchLog } from "@/utils/storageUtils.js"
	export default {
		data() {
			return {
				tablist: [
					{ name: '同行车源', type: 'upload' },
					{ name: '朋友圈', type: 'pyq' },
					{ name: '同行求购', type: 'need' },
					{ name: '车商群', type: 'group' },
				],
				searchloglist: [],
				tbsCustomStyle: { BackgroundColor: '#fff', MarginTop: '0px' },
				place: '全国',
				list: [],
				total: 0,
				status: 'loadmore',
				showTab: false,
				tabvalue: 0,


				queryForm: {
					start: 0,
					length: 10,

					place: '',
					val: '',
					type: 'upload'
				}
			}
		},

		onLoad(option) {
			if (option.city) {
				this.place = option.city
			}
			if (option.tab) {
				this.tabvalue = option.tab
				this.queryForm.type = this.tablist[this.tabvalue].type
			}
			this.loadSearchLog()
		},

		methods: {
			handllog(key) {
				this.queryForm.val = key
				this.searchcar()
			},
			loadSearchLog() {
				this.searchloglist = getSearchLog()
			},
			deletesearchlog(item) {
			
			},
			changeTabs(e) {
				const { index, type } = e
				this.queryForm.type = type
				this.list = []
				this.queryForm.start = 0
				this.searchcar()
			},

			searchcar() {
				if (this.place == "全国") {
					this.queryForm.place = ""
				}
				if (!this.queryForm.val) {
					uni.showToast({
						title: "请输入搜索内容",
						icon: "fail"
					})
					return
				}
				this.searchloglist.push(this.queryForm.val)
				setSearchLog(this.searchloglist)
				searchAllByVal(this.queryForm).then(res => {
					this.showTab = true
					const { total, rows, count } = res.data
					switch (this.queryForm.type) {
						case 'upload':
							rows.map(arr => {
								arr.imglist = []
								arr.avatar = baseconfig.api_url + arr.userimgsrc
								if (arr.imgsrc) {
									var _list = arr.imgsrc.split(',')
									_list.forEach(imgarr => {
										arr.imglist.push(baseconfig.api_url + imgarr)
									})
								}
							})
							break
						case 'pyq':
							rows.map(arr => {
								arr.imglist = []
								arr.avatar = baseconfig.api_url + arr.userimgsrc
								if (arr.imgsrc) {
									var _list = arr.imgsrc.split(',')
									_list.forEach(imgarr => {
										arr.imglist.push(baseconfig.api_url + imgarr)
									})
								}
							})
							break
						case 'need':
							rows.map(arr => {
								arr.time = timespantoYMD(arr.createtime)
								arr.encry = encryptphone(arr.phone)
							})
							break
						case 'group': {
							rows.map(arr => {
								arr.avatar = baseconfig.api_url + arr.imgsrc
								arr.img_contact = baseconfig.api_url + arr.contacts
							})
						}
					}

					this.total = total
					Object.assign(this.list, rows)
					if ((this.queryForm.start + this.queryForm.length) >= total) {
						this.status = 'nomore'
					}
				})
			},
			tolocal() {
				uni.navigateTo({
					url: "/pages/search/plate"
				})
			},
		}
	}
</script>

<style lang="scss">
	.searchloglist{
		background: #fff;
		margin-top: 20upx;
	}
	.searchloglist .uv-cell-group__title__text{
	    font-size: 28upx !important;
	    color: #999 !important;
	}
	.searchloglist .uv-cell__title{
		font-size: 28upx !important;
	}
</style>